<!-- 人工巡检 日志 -->
<template>
	<el-card shadow="hover">
		<el-row>
			<el-form
				:inline="true"
				:model="data.queryParams"
				class="demo-form-inline"
			>
				<!-- <xq-select
					@do-search="mergeSearchData"
					:show-build="false"
					:show-util="false"
				/> -->

				<el-form-item label="巡检日期">
					<el-date-picker
						v-model="data.queryParams.checkDate"
						size="default"
						type="date"
						placeholder="日期"
						value-format="YYYY-MM-DD"
					/>
				</el-form-item>

				<el-form-item label="设备">
					<el-input
						v-model="data.queryParams.deviceCode"
						placeholder="设备编号"
						size="default"
						clearable
						style="width: 150px"
					/>
				</el-form-item>

				<el-form-item label="">
					<el-button
						type="primary"
						@click="search"
						size="default"
					>
						查询
					</el-button>
				</el-form-item>
			</el-form>
		</el-row>

		<!-- 表格数据展示 -->
		<el-table
			ref="table"
			v-loading="data.loading"
			:data="data.tableData.list"
			border
			fit
			style="width: 100%"
			height="calc(100vh - 330px)"
		>
			<el-table-column
				align="center"
				type="index"
				width="50px"
			/>
			<el-table-column
				label="设备编号"
				prop="deviceCode"
			/>
		
			<el-table-column label="资产编号" prop="voltageCode" />
			<el-table-column
				label="设备地址"
				width="350px"
			>
				<template #default="{ row }">
					{{ getAddress(row) }}
				</template>
			</el-table-column>
			<el-table-column
				label="操作"
				column-key="operation"
				width="220px"
			>
				<template #default="{ row }">
					<el-button
						@click="viewLog(row)"
						size="small"
						link
						type="primary"
						>查看日志</el-button
					>
				</template>
			</el-table-column>
		</el-table>

		<!-- 查看日志对话框 -->
		<LogView
			v-if="data.dialog.isVisible"
			:type="data.dialog.type"
			:visible="data.dialog.isVisible"
			@close="dialogClose"
			:cur-device="data.curDevice"
		/>

		<!-- 分页 -->
		<pagination
			:total="data.tableData.total"
			v-model:page="data.queryParams.pageNum"
			v-model:limit="data.queryParams.pageSize"
			@pagination="fetch"
		/>
	</el-card>
</template>

<script lang="ts" setup name="DoCheckLog">
import { useSmoke } from '/@/hook/index';
import { reactive, onMounted, ref, watch, onUpdated } from 'vue';
import LogView from './LogView.vue';
import orgSelect from '/@/components/smoke/orgSelect/index.vue';
import deviceApi from '/@/api/smoke/device';
const { getAddress } = useSmoke();

const data = reactive({
	queryParams: {
		communityId: '', // 小区ID
		deviceCode: '',
		checkDate: '',
		pageNum: 1,
		pageSize: 10,
	},
	loading: false,
	tableData: {
		list: <any>[],
		total: 0,
	},
	curInfo: {},
	dialog: {
		isVisible: false,
		type: 'add',
	},
	curDevice: <any>null,
});

onMounted(() => {
	fetch();
});

// 弹窗打开
function dialogOpen() {
	data.dialog.isVisible = true;
}
// 弹窗关闭
function dialogClose() {
	data.dialog.isVisible = false;
}

function mergeSearchData(xqData: any) {
	const { ids, dept, communityId, communityIds } = xqData;
	Object.assign(data.queryParams, { ids, communityId, communityIds });
	search();
}

function search() {
	data.queryParams.pageNum = 1;
	fetch();
}

// 获取列表页数据
function fetch(params?: any) {
	data.loading = true;

	// data.queryParams.pageNum = params.page
	Object.assign(data.queryParams, params);
	deviceApi
		.getNormalCheckLog(data.queryParams)
		.then((res: any) => {
			data.tableData = res.data;
			data.loading = false;
		})
		.finally(() => (data.loading = false));
}

function viewLog(row: any) {
	data.curDevice = row;
	dialogOpen();
}
</script>
<style lang="scss" scoped>
:deep(.el-form--inline .el-form-item) {
	margin-right: 10px;
}
</style>
